<template>
  <!-- 工艺参数监控规则表单弹窗 -->
  <div>
    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      border
    >
      <el-table-column
        label="参数名称"
        prop="parameterDesc"
        min-width="100"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{ JSON.parse(scope.row.afterData).parameterDesc }}
        </template>
      </el-table-column>
      <el-table-column
        label="变更人"
        prop="createdUserName"
        min-width="100"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="变更时间"
        prop="createTime"
        min-width="150"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        label="变更原因"
        prop="remarks"
        min-width="300"
        show-overflow-tooltip
      />

      <el-table-column fixed="right" label="详情" width="50" align="center">
        <template #default="scope">
          <el-tooltip
            :hide-after="0"
            effect="light"
            content="查看"
            placement="top"
          >
            <el-button
              type="primary"
              size="small"
              link
              @click="openDialogdetail(scope.row.id)"
            >
              <i-ep-search />
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :background="true"
      :current-page="pageable.pageNum"
      :page-size="pageable.pageSize"
      :page-sizes="[10, 25, 50, 100]"
      :total="pageable.total"
      layout="total, sizes, prev, pager, next, jumper"
      class="mt-[20px]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <psmparammonitorrule-changerecorddetail
      v-model:visible="dialog.visible"
      :title="dialog.title"
      :data="dialog.data"
      @change-visible="changeVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { getUserInfo } from "@/api/user/index";
import request from "@/utils/request";
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { validateNumber, validateNumberCanNot1 } from "@/utils/commonHooks";
import { getMdmProcessEquipApi } from "@/utils/commonData";
import dayjs from "dayjs";
import { authAllPerm } from "@/utils";
import useEvent from "@/utils/useEvent";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PCMPSMPARAMMONITORRULEALLCHANGERECORD",
  inheritAttrs: false,
});
const { eventBusOn } = useEvent();

onMounted(() => {
  eventBusOn("PSM-PARAM-MONITOR-RULE-ALL-CHANGE-RECORD", (id) => {
    searchParam.value.mainId = id;
    search();
  });
});

// 请求参数
const requestApi = "/dmpDosPcm/psmparammonitordetailhis/queryByPage";

const initParam = {};
// 是否需要分页
const pagination = true;
// 数据请求错误后处理
function requestError() {}
const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行
// 初始化搜索参数数据
const searchParamInit = {
  mainId: "",
};
// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError
);

const dialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});
/** 打开工艺参数监控规则表单弹窗 详情 */
function openDialogdetail(id?: any) {
  dialog.title = "变更记录详情";
  getInfo(id);
}

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/dmpDosPcm/psmparammonitordetailhis/get/${id}`,
    method: "get",
  })
    .then((data) => {
      dialog.data = data.data;
      dialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}
function changeVisible(value: boolean) {
  dialog.visible = value;
  if (!value) {
    dialog.data = {};
  }
}
</script>

<style lang="scss" scoped></style>
